import * as echarts from 'echarts/core';
/**
 * 数据分析 人员数据分析（工龄分布）——横向柱状图
 * 
 * **/
const indexEchartsLine = (data, myChart) => {
    data = [
        { name: '1年及其以下', value: 123 },
        { name: '1年以上3年以下', value: 103 },
        { name: '3年以上5年以下', value: 93 },
        { name: '5年以上10年以下', value: 80 },
        { name: '10年以上', value: 20 },
    ]
    const xdata = data.map((v) => v.name);
    const ydata = data.map((v) => v.value);
    const barColor = {
        0: ['#F7ECB0', '#FFE86C'],
        1: ['rgba(0, 202, 252, 0.3)', 'rgba(0, 202, 252, 1)'],
    };

    const defaultConfig = {
        grid: {
            left: 20,
            bottom: 10,
            right: '15%',
            top: 10,
            containLabel: false,
        },
        yAxis: [
            {
                inverse: true,
                data: xdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        align: 'left',
                        fontFamily: 'MiSans-Normal',
                    },
                    padding: [-10, 0, 15, 0],
                    formatter: (name, index) => {
                        const _index = index + 1;
                        if (index === 0) {
                            return `{num|  ${name}}`;
                        }
                        return `{num|  ${name}}`;
                    },
                    rich: {
                        num: {
                            padding: [0, 20, 0, 5],
                            width: 25,
                            color: '#fff',
                            align: 'left',
                            fontSize: 12,
                            fontFamily: 'Mohave-BoldItalic',
                            fontWeight: 400,
                        },
                    },
                },
                offset: 0,
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
            {
                inverse: true,
                data: ydata,
                axisLabel: {
                    textStyle: {
                        color: '#00C9FB',
                        fontSize: 12,
                        fontFamily: 'MiSans-Medium',
                        align: 'right',
                        top:'10',
                        padding: [0, -40, 0, 0],
                    },
                    formatter: (name, index) => {
                        if (index === 0) {
                            return `{num1|${name}人}`;
                        }
                        return `${name}人`;
                    },
                    rich: {
                        num1: {
                            color: '#00C9FB',
                        },
                    },
                },
                offset: 0,
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
        ],
        xAxis: {
            show: false,
        },
        series: [
            {
                z: 1,
                type: 'bar',
                data: ydata,
                barWidth: 7,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(95, 123, 149, 0.2)',
                },
                itemStyle: {
                    color: function (params) {
                        const { dataIndex } = params;
                        const colors = barColor[1];
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: 'rgba(0, 0, 0, 0)',
                            },
                            {
                                offset: 0.5,
                                color: colors[0],
                            },
                            {
                                offset: 1,
                                color: colors[1],
                            },
                        ]);
                    },
                },
            },
            {
                type: 'pictorialBar',
                data: ydata,
                z: 10,
                symbol: 'circle',
                symbolRotate: null,
                symbolSize: [8, 8],
                symbolPosition: 'end',
                symbolOffset: [4, 0],
                itemStyle: {
                    color: 'rgba(255,255,255,1)',
                },
            },
            {
                type: 'pictorialBar',
                data: ydata,
                z: 9,
                symbol: 'circle',
                symbolRotate: null,
                symbolSize: [10, 10],
                symbolPosition: 'end',
                symbolOffset: [8, 0],
                itemStyle: {
                    color: 'rgba(255,255,255,0.1)',
                    borderColor: 'rgba(255,255,255,0.3)',
                },
            },
            {
                type: 'pictorialBar',
                data: ydata,
                z: 8,
                symbol: 'circle',
                symbolRotate: null,
                symbolSize: [20, 20],
                symbolPosition: 'end',
                symbolOffset: [10, 0],
                itemStyle: {
                    color: 'rgba(255,255,255,0.15)',
                    borderColor: 'rgba(255,255,255,0.3)',
                },
            },
        ],
    }

    const opt = { ...defaultConfig };
    return opt;
};

export default {
    indexEchartsLine
}

